<template>
    <div class="login-box">
        <header>
            <div class="title">
                <div class="login">
                    {{ t('register.register') }}
                </div>
                <div class="lang" @click="goLogin">
                    {{ t('register.back') }}
                </div>
            </div>
        </header>
        <main>
            <myInput v-model="regForm.realName" :placeholder="t('register.realname')"></myInput>
            <myInput v-model="regForm.phone" :placeholder="t('register.phone')" icon-name="phone-o"></myInput>
            <myInput v-model="regForm.userName" :placeholder="t('register.username')" icon-name="manager-o"></myInput>
            <myInput v-model="regForm.password" :placeholder="t('register.loginpassword')" type="password"
                icon-name="phone-o">
            </myInput>
            <myInput v-model="regForm.amtPassword" :placeholder="t('register.withdrow')" type="password" icon-name="eye-o">
            </myInput>
            <van-checkbox class="checkbox" v-model="check" shape="square">{{ t("register.agree") }}</van-checkbox>
            <div class="btn">
                <button class="submit" @click="submit()">{{ t('register.submit') }}</button>
            </div>
        </main>
    </div>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import myInput from '@/components/Input/index.vue';
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue';
import { userApi } from '@/api'
import { showNotify } from 'vant';

const { t } = useLanguage()
const router = useRouter()

const regForm = reactive({
    realName: '',
    phone: '',
    userName: '',
    password: '',
    amtPassword: '',
})

const rules = {
    realName: [{ rule: /^.{1,18}$/, message: t('register.rules.realname') }],
    phone: [{ rule: /^(?!00)\d{5,18}$/, message: t('register.rules.phone') }],
    userName: [{ rule: /^.{5,18}$/, message: t('register.rules.username') }],
    password: [{ rule: /^.{6,18}$/, message: t('register.rules.loginpassword') }],
    amtPassword: [{ rule: /^.{6,18}$/, message: t('register.rules.withdrow') }]
}

function validate(key) {
    let s = true
    rules[key].forEach(v => {
        if (!v.rule.test(regForm[key])) {
            // 弹窗
            showNotify({ type: 'danger', message: v.message })
            s = false
            return false
        }
    })
    return s
}

const check = ref(false)
function submit() {
    if (!validate('realName')) return // 当validate('realName')为false才执行
    if (!validate('phone')) return // 当validate('phone')为false才执行
    if (!validate('userName')) return // 当validate('userName')为false才执行
    if (!validate('password')) return // 当validate('password')为false才执行
    if (!validate('amtPassword')) return // 当validate('amtPassword')为false才执行
    if (!check.value) {
        // 当check为false才执行
        showNotify({ message: t("register.check"), type: 'danger' })
        return
    } else {
        // 注册
        userRegister()
    }
}

async function userRegister() {
    const { code } = await userApi.userRegister(regForm)
    if (code === 20000) {
        showNotify({ message: t("register.success"), type: 'success' })
    } else {
        showNotify({ message: t("register.error"), type: 'danger' })
    }
}

function goLogin(params) {
    router.push({ name: 'login' })
}


</script>

<style lang="less" scoped>
.login-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    margin-top: 150px;
    .title {
        padding: 10px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
            font-size: 24px;
            font-weight: 900;
        }
    }
}

main {
    margin-top: 50px;
    padding: 0 20px;

    .checkbox {
        margin-top: 10px;
        margin-left: 5px;
    }

    .btn {
        display: flex;
        flex-direction: column;
        width: 100%;

        button {
            border-radius: 2px;
            height: 40px;
            box-shadow: 0px 5px 5px #CDCDCD;
            margin-top: 20px;
            color: #fff;
        }

        .submit {
            background-color: #EF5350;
        }

        .register {
            background-color: #42A5F5;
        }
    }
}

footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .footer {
        display: flex;
        flex-direction: column;
        margin: 10px 10px;

        span {
            color: #000;
            font-size: 14px;
        }

        .customer {
            margin-top: 5px;
            color: #FF9800;
            font-weight: 900;
        }
    }
}
</style>